{% extends 'base.html' %}
	{% block tx %}
               <form action="" enctype="multipart/form-data" method="post">
                <label for="myfile">头像
                    <img src="/{{user_obj.avatar}}/" alt="" width="100" id="myimg">
                </label>
                <input type="file" id="myfile" name="avatar" style="display: none">
                <p><input type="button" id="id_commit" class="btn btn-success form-control" value="保存"></p>
            </form>
	{% endblock %}
   {% block bt %}
	   <h1>用户信息</h1>
   {% endblock %}
{% block bg %}
    <a href="/add_user/" class="btn btn-primary">添加用户</a>
    <table class="table table-striped table-hover">

        <thead>
        <tr>
            <th>序号</th>
            <th>用户id值</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>性别</th>
	        <th>角色名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for lb in home_list %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ lb.id}}</td>
                <td>{{ lb.username }}</td>
                <td>{{ lb.phone_number}}</td>
                <td>{{ lb.ui.sex }}</td>
	            <td>
	            {% for part_obj in lb.part.all %}
                            {% if forloop.last %}
                                {{ part_obj.name }}
                            {% else %}
                                {{ part_obj.name }},
                            {% endif %}
                        {% endfor %}
	            </td>
                <td>
	                <a href="/add_part/{{ lb.id }}/" class="btn btn-warning">管理角色</a>
                    <a href="/edit_user/{{ lb.id }}/" class="btn btn-warning">编辑</a>
                    <button class="btn btn-danger ajax_sub" xx="{{ lb.pk }}">删除</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
	{{ page_obj.page_html }}
{% endblock %}
{% block sc %}
<script>
    $('.ajax_sub').on('click',function () {
        var user_id = $(this).attr('xx');  //获取xx属性对应的值
        var ths = $(this); // 保存一下这个this
        swal({
            title: "are you sure？",
            text: "开弓没有回头箭!",
            type: "warning",
            showCancelButton: true,
            confirmButtonClass: "btn-danger",
            confirmButtonText: "确认删除",
            cancelButtonText: "容我三思",
            closeOnConfirm: false
        },
	        function (isConfirm){
            if(isConfirm){
                $.ajax({
                type: 'get',
                url: '/ajax_del_user/' + `${user_id}` + '/',
                success: function (res) {
                    if (res.status === 1) {
                        swal("删除成功!", "该条记录已被删除", "success");
                        ths.parent().parent().remove();
                    } else {
                        swal("删除失败", "删除动作有有误!", "error");
                    }
                },
            })}else {
                swal('no')
            }
        })
    })


	$("#myfile").change(function () {
        var myFileObj = new FileReader();
        var fileObj = $(this)[0].files[0];
        myFileObj.readAsDataURL(fileObj)
        myFileObj.onload = function () {
            $('#myimg').attr('src', myFileObj.result)
        }
    })
    $('#id_commit').click(function () {
        var formDataObj = new FormData();
        formDataObj.append('csrfmiddlewaretoken','{{ csrf_token }}');
        formDataObj.append('avatar', $('#myfile')[0].files[0]);
        $.ajax({
            url: "",
            type: 'post',
            data: formDataObj,
            contentType: false,
            processData: false,
            success: function (args) {
                    alert('成功')
            }
        })
    })
</script>

{% endblock %}